import React from 'react'
import ReactDOM from 'react-dom'

//Test1调用几次？ 1+n次
export default function Test2() {
	const [sum,setSum] = React.useState(0)
	const [name,setName] = React.useState('老刘')

	function increment(){
		// setSum( (s)=>s+1 ) //第一种更新sum的方法
		setSum(sum+1) //第二种更新sum的方法
	}

	function demo(){
		setName('老孙')
	}

	function death(){
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}

	//模拟生命周期钩子
	//useEffect调用时传入的函数是两个人的组合体：componentDidMount + componentDidUpdate
	React.useEffect(()=>{
		console.log('componentDidMount')
		const id = setInterval(()=>{
			setSum((s)=>s+1)
		},1000)
		//return的这个函数相当与componentWillUnmount
		return ()=>{
			console.log('componentWillUnmount')
			clearInterval(id)
		}
	},[])

	return (
		<div>
			<h2>当前求和为:{sum}</h2>
			<h2>当前求和为:{name}</h2>
			<button onClick={increment}>+1</button>
			<button onClick={demo}>改名</button>
			<button onClick={death}>卸载组件</button>
		</div>
	)
}
